<template>
	<div>
		<h1>滚动监听</h1>
		<ul class="list" ref="list">
			<li>区域</li>
			<li>价格</li>
			<li>房型</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
			<li>更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多更多</li>
		</ul>
	</div>
</template>
<script>
import { ref } from "vue"
export default {
	name: 'MonitorScrolling',
	mounted() {
		let box = this.$refs.list
		let that = this
		box.onscroll = () => {
			that.handleScroll()
		}
	},
	setup() {
		const list = ref(null)
		function handleScroll() {
			let box = list.value
			console.dir(box,'===box')
			console.log(box.scrollTop,'==scrollTop')
			console.log(box.scrollLeft,'==scrollLeft')

		}
		return {
			list,
			handleScroll
		}
	}
}
</script>
<style scoped>
.list {
	width: 200px;
	height: 200px;
	overflow: scroll;
	border: 1px solid #007aff;
}
.list li {
	width: 550px;
}
</style>